<template>
    <!-- Echarts容器 -->
    <div class="charts" ref="myechart" > 
               
    </div>
</template>

<script>
import * as  echarts from 'echarts'

export default {
    name:'pieChart',
    methods:{
         getEchart(){
            const myChart = echarts.init(this.$refs.myechart) 
            let option = {
                title: {
                    // text: '视频广告',
                    // subtext:735,
                    left: 'center',
                    top:'center'
                },
                //提示框组件。
                tooltip: {
                    trigger: 'item'
                },
                //图例组件--通过点击图例控制哪些系列不显示
                legend: {
                    //图例列表的布局朝向 --竖着排布vertical，默认横向
                    orient: 'vertical',
                    //图例标记和文本的对齐
                     align:'left',
                    //图例组件分布容器右侧
                    left: 'right',
                    //图例的icon
                    icon: "circle",
                    //图例的公用文本样式
                    textStyle: {
                        "fontSize": 14
                    },
                },
                series: [
                    {
                        name: '销售额类别占比',
                        type: 'pie',
                        //饼图的半径
                        radius: ['45%', '80%'],
                        //是否启用防止标签重叠策略
                        avoidLabelOverlap: false,
                        //图形样式
                        itemStyle: {
                            borderRadius: 0,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        data: [
                            { value: 1048, name: '搜索引擎' },
                            { value: 735, name: '视频广告' },
                            { value: 580, name: '联盟广告' },
                            { value: 484, name: '直接访问' },
                            { value: 300, name: '邮件营销' }
                        ],
                        label: {
                            normal: {
                                "show": true,
                                "textStyle": {
                                    "fontSize": 16
                                }
                            }
                        },
                        labelLine: {
                            show: true,
                            length: 20,
                            length2: 20
                        },
                        //标签放大效果
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 20,
                                fontWeight: 'bold',
                                // position:'center'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option)
            myChart.on("mouseover",(parmas)=>{
                // 获取鼠标移上去那条数据
                const {name,value} = parmas.data;
                // 重新设置标题
                myChart.setOption({
                     title:{
                        text:name,
                        subtext:value
                     }
                })
            })
            window.addEventListener("resize", () => {//监听浏览器窗口大小
                if(myChart){
                    myChart.resize();
                }
            });
         }
     },
     mounted(){
        this.getEchart()
     }
}
</script>

<style scoped>
    .charts{
        width: 100%;
        height: 100%;
    }
</style>